import React, { Component } from 'react';
import './HCxx.css'
import { Flex } from 'antd-mobile';
class HCxx extends Component {
    // eslint-disable-next-line no-useless-constructor
    constructor() {
        super()
        this.state = {
            first: [1, 2, 3, 4, 5],
            click: 0
        }
    }
    tubiao(num) {
        // console.log(num);
        this.setState({
            click: num
        })
        this.props.fun(num)
    }
    showState = () => {
        return this.state.first.map((item, i) => {
            if (this.state.click < i + 1) {
                return (<i className="iconfont icon-pingfen1 hui" key={i} onClick={() => this.tubiao(i + 1)}></i>)
            } else {
                return (<i className="iconfont icon-pingfen1 huang" key={i} onClick={() => this.tubiao(i + 1)}></i>)
            }
        })
    }
    render() {
        return (
            <Flex style={{ textAlign: 'center' }} alignContent='around'>
                <Flex.Item className='xx_title'>
                    <span>
                        {this.props.name}:
                    </span>
                    {this.showState()}
                </Flex.Item>
            </Flex>
        );
    }
}

export default HCxx;